<!doctype html>
<head>
    <title>Semua Bisa</title>
<style type='text/css'>
div#items a {
			text-decoration:none;
			color:#3deeee;	
		}
		
		div#items {
			width:960px;
			margin:0 auto;
		}

		#items .item {
			display:block;
			width:145px;
			height:145px;
			padding:4px;	
			float:left;
			position:relative;
			-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
			-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
			box-shadow:0 0 8px rgba(0,0,0,0.5);
			margin:5px 5px 0px -1px;
		}
		
		#items .item .caption {	
			position:absolute;
			top:129px;
			left:4px;
			padding:3px;
			font-size:10px;
			width:139px;
			display:none;
			background:#000;
		}
				
		.clear {
			clear:both;	
		}
	
		.effect {
			box-shadow: 0 0 10px #444;	
			-moz-box-shadow: 0 0 10px #444;	
			-webkit-box-shadow: 0 0 10px #444;	
			}

</style>
<script src='https://my-ariefin.googlecode.com/svn/trunk/script/jquery-1.8.3.min.js' type='text/javascript'/>
	</script>
<script src='https://my-ariefin.googlecode.com/svn/trunk/script/jquery.easing.1.3.js' type='text/javascript'/>
	</script>
<script src='https://my-ariefin.googlecode.com/svn/trunk/script/tampilan.js' type='text/javascript'/>
	</script>
<script type='text/javascript'>
/*<![CDATA[*/
	
	$(document).ready(function () {

		//loop through all the children in #items
		//save title value to a span and then remove the value of the title to avoid tooltips
		$('#items .item').each(function () {
			title = $(this).attr('title');
			$(this).append('<span class="caption">' + title + '</span>');	
			$(this).attr('title','');
		});

		$('#items .item').hover(
			function () {
				//set the opacity of all siblings
				$(this).siblings().css({'opacity': '0.1'});	
				
				//set the opacity of current item to full, and add the effect class
				$(this).css({'opacity': '1.0'}).addClass('effect');
				
				//show the caption
				$(this).children('.caption').show();	
			},
			function () {
				//hide the caption
				$(this).children('.caption').hide();		
			}
		);
		
		$('#items').mouseleave(function () {
			//reset all the opacity to full and remove effect class
			$(this).children().fadeTo('100', '1.0').removeClass('effect');		
		});
		
	});
	
	/*]]>*/
	</script>
</head>
  <body>
<div id='items' style='margin-bottom:15px'>
		<a class='item' href='#' title='Bleach Episode 1'>
			<img height='145' src='http://1.bp.blogspot.com/-6mJuvivImHc/TZ6uThVNnDI/AAAAAAAAAaw/IX8HNmqM3Tc/s1600/bleach27.jpg' width='145'/>
		</a>
		<a class='item' href='#' title='Fairy Tail Episode 1'>
			<img height='145' src='http://2.bp.blogspot.com/-QhaLiP6Q7hE/UAdv_I7gBLI/AAAAAAAAAFE/DFbQnHuf9Pk/s1600/fairytail-team-fairy-tail-29148827-993-561.png' width='145'/>
		</a>
		<a class='item' href='#' title='Naruto Shippuden Episode 1'>
			<img height='145' src='http://th05.deviantart.net/fs70/PRE/f/2012/192/0/8/naruto_shippuden___minato_namizake_by_tekilazo300-d56s5b9.jpg' width='145'/>
		</a>
		<a class='item' href='#' title='One Piece Episode 1'>
			<img height='145' src='http://3.bp.blogspot.com/-8L6uCEjD_5o/UAfDDvE-oLI/AAAAAAAAC60/VYV6KWNEXdU/s400/one+piece.png' width='145'/>
		</a>
		<a class='item' href='#' title='Detective Conan Episode 1'>
			<img height='145' src='http://3.bp.blogspot.com/_ENb686CbicE/THAcAF8QK5I/AAAAAAAAACs/eSHlqn1YhKc/s1600/detectiveconan1024qk3.png' width='145'/>
		</a>
		<a class='item' href='#' title='Death Note Episode 1 '>
			<img height='145' src='http://4.bp.blogspot.com/-ujzdKUeRomc/UDDitcCivNI/AAAAAAAAATI/Wu6juVKI40c/s1600/L+DEATH+NOTE+2.jpg' width='145'/></a>
	</div>
	
	<div class='clear'/>
 </body>

</html>
</div>